<template>
  <div class="news-manager-container">
    <!-- 新闻列表 -->
    <div v-for="newsItem in tableData" :key="newsItem.id" class="news-item">
      <h2 class="news-title">{{ newsItem.title }}</h2>
      <p class="news-date">{{ formatDate(newsItem.createTime) }}</p>
      <a
          href="javascript:void(0)"
          class="news-link"
          @click="openNewsInNewWindow(newsItem.id)"
      >
        阅读更多
      </a>
    </div>

    <!-- 分页部分 -->
    <div class="pagination-container">
      <p class="pagination-info">
        共 {{ totalPages }} 页 / {{ total }} 条
      </p>
      <ul class="pagination">
        <li
            class="pagination-button"
            :class="{ disabled: pageRequest.pageNum === 1 }"
            @click="goToPage(1)"
        >
          首页
        </li>
        <li
            class="pagination-button"
            :class="{ disabled: pageRequest.pageNum === 1 }"
            @click="goToPage(pageRequest.pageNum - 1)"
        >
          上一页
        </li>
        <li
            v-for="page in visiblePages"
            :key="page"
            :class="{ active: pageRequest.pageNum === page }"
            @click="goToPage(page)"
        >
          {{ page }}
        </li>
        <li
            class="pagination-button"
            :class="{ disabled: pageRequest.pageNum === totalPages }"
            @click="goToPage(pageRequest.pageNum + 1)"
        >
          下一页
        </li>
        <li
            class="pagination-button"
            :class="{ disabled: pageRequest.pageNum === totalPages }"
            @click="goToPage(totalPages)"
        >
          尾页
        </li>
      </ul>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      tableData: [], // 新闻数据
      pageRequest: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页显示条数
      },
      total: 0, // 总记录数
      totalPages: 0, // 总页数
    };
  },
  mounted() {
    this.load();
  },
  computed: {
    visiblePages() {
      const pages = [];
      const { pageNum } = this.pageRequest;
      const maxVisible = 5; // 显示的最大页码数量
      const start = Math.max(1, pageNum - 2);
      const end = Math.min(start + maxVisible - 1, this.totalPages);

      for (let i = start; i <= end; i++) {
        pages.push(i);
      }
      return pages;
    },
  },
  methods: {
    // 加载数据
    load() {
      this.request
          .post("/news/all", {
            pageNum: this.pageRequest.pageNum,
            pageSize: this.pageRequest.pageSize,
          })
          .then((res) => {
            if (res && res.code === "200") {
              // 按时间倒序排列
              this.tableData = res.data.list.sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
              this.total = res.data.total;
              this.totalPages = Math.ceil(this.total / this.pageRequest.pageSize);
            } else {
              console.error("Failed to load data:", res.msg);
            }
          })
          .catch((error) => {
            console.error("Error fetching data:", error);
          });
    },

    // 跳转到指定页面
    goToPage(page) {
      if (page < 1 || page > this.totalPages || page === this.pageRequest.pageNum) {
        return;
      }
      this.pageRequest.pageNum = page;
      this.load();
    },

    // 格式化日期
    formatDate(dateString) {
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },

    // 打开新闻详情页的新窗口
    openNewsInNewWindow(newsId) {
     this.$router.push({ name: "NewsDetail", params: { id: newsId } });

    },
  }

};

</script>

<style>
/* 全局样式 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-y: auto; /* 确保页面可以滚动 */
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f9fafb;
  color: #333;
}

/* 新闻管理样式 */
.news-manager-container {
  padding: 20px;
  //max-height: 80vh; /* 设置最大高度，超出时滚动 */
  //overflow-y: auto;
}

.news-item {
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.news-title {
  font-size: 18px;
  color: #333;
  margin-bottom: 5px;
}

.news-date {
  font-size: 14px;
  color: #999;
  margin-bottom: 10px;
}

.news-link {
  color: #007bff;
  text-decoration: none;
}

.news-link:hover {
  text-decoration: underline;
}

.pagination-container {
  text-align: center;
  margin-top: 20px;
}

.pagination-info {
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}

.pagination {
  list-style: none;
  padding: 0;
  display: inline-block;
}

.pagination li {
  display: inline-block;
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #007bff;
}

.pagination li.active {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

.pagination li.disabled {
  color: #ccc;
  cursor: not-allowed;
  border-color: #eee;
}

.pagination li:hover:not(.active):not(.disabled) {
  background-color: #f0f0f0;
}

</style>
